<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
    padding: 50px;
    background-color: lightblue;
}
.box2{
    padding: 50px;
    background-color: lightgreen;
}
</style>
</head>
<body>
    
<div class="box1">
    <div class="box2"></div>
</div>

<script>
// 事件冒泡和事件捕获都有一个特征：传播

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

document.addEventListener('click',function (e){
    console.log( 'document被点击。。。' )
    e.stopPropagation()// 阻止事件传播
},true);

box1.addEventListener('click',function (e){
    console.log( 'box1被点击。。。' )
    e.stopPropagation()// 阻止事件传播
},true);

box2.addEventListener('click',function (e){
    console.log( 'box2被点击。。。' )
    e.stopPropagation()// 阻止事件传播
},true);

</script>
</body>
</html>